![schoo で iOS の授業をしてきました [Web API で曲名一覧を取ってくる編]](https://devio2023-media.developers.io/wp-content/uploads/2015/09/report.png)
schoo で iOS の授業をしてきました [Web API で曲名一覧を取ってくる編]
はじめに
去る2015年9月、オンライン授業サイト Schoo（スクー） 様にて授業させて頂きました。
今回から数回にわたり、授業の内容を補足しつつ、ブログ内で、授業で扱った技術について解説していけたらと思います。また、適宜授業をやるなかで得た知見についても書いていけたらと思います。
授業が録画されているものが授業サイト上にあります（リンクは後述）。より理解を深めたい方は、こちらをご覧頂ければと存じます。
謝辞
スクー様では、企画段階から事前の授業資料のフィードバック、そして放送の本番に至るまで、様々な方にお世話になりました。またクラスメソッド社内ではコードや授業資料のレビュー、さらにプレ授業を社内でやらせていただきフィードバック頂くなど、お世話になりました。ありがとうございました！
リンク
授業ページ
GitHub
ゴール
※ 以下、１回目の授業での授業の内容を補完する形で、書いていきたいと思います。
検索ワードを入力すると、曲情報が一覧形式で表示されるアプリを作ることが、シリーズを通してのゴールになります。
今回のゴール
- Web API の仕組みを学ぶ
- iTunes の API を使って曲情報を取得・表示する
-
ブラウザで Apple の Web API (Search API) を使って情報を表示
-
Xcode 上から Apple の Web API (Search API) を使って 曲情報を取得・表示する
Web API とは
Web API の定義は細かい部分で異なる複数の定義があると認識していますが、授業では以下のように定義しました。
・様々な情報を処理するためのプログラム。 ・Web API という名の通り、ネット上に存在する。
これにアクセスして、情報の取り出し・登録が出来ます。具体的には、天気予報APIや、Facebookについても APIがあります。
例えば天気予報 API であれば、スマホから現在地の緯度・経度を送信し、Web API 側で処理。該当する地域の今日の天気予報データをスマホに送信し 結果がお天気アプリの画面に表示されるという流れが考えられます。
ブラウザから Web API にアクセス
Web API にブラウザからアクセスしてみましょう。 以下のリンクをクリックしてみてください。
沢山の文字の羅列が表示されたと思います。一旦この内容を全部クリップボードにコピーしておきます。
続いて、以下のサイトに行き、灰色の入力ボックスに、コピーしておいた内容を貼り付けましょう。
JSONLint - The JSON Validator.
すると、先ほどの内容が整形されて表示されます。
URL の説明
上記でクリックしたリンクは、幾つかのセクションにわかれています。
https://itunes.apple.com/search?term=…
- https
- スキーム
- itunes.apple.com
- ホスト名
- search
- パス
- ?term=…
- リクエストパラメータ
リクエストパラメータ
Web API に対して渡したい情報を書いていきます。
各パラメータは & で区切る事になっています。
今回は以下の内容を渡しています。
https://itunes.apple.com/search?term=Ryuichi+Sakamoto&entity=musicTrack&limit=3&lang=ja_jp&country=JP
- term=Ryuichi+Sakamoto（検索する語句）
- entity=musicTrack (ほしい情報の種類)
- limit=3 (何件のデータがほしいか)
- lang=ja_jp (結果を何語で受け取るか)
- country=JP (どの国の iTunes Store で売っているか)
JSON 形式で返ってくるデータ一例
JSONLint で整形したデータを、縮小した画面に収めると、こんな感じになります。しかし、チョット小さすぎますね。
一曲分だけ抜き出して表示してみます。これでも小さい。
分かりやすく、省略して表示してみます。データが、JSONという形式で返ってきています。
JSONについて詳しくは、以下の記事をご参照下さい。
非エンジニアに贈る「具体例でさらっと学ぶJSON」 ｜ Developers.IO
今回扱っている Web API から返ってくるデータは、大きく分けて２つのセクションに別れます。
- 結果として返ってきた曲数
- 各曲の詳細
Xcode を使って Web API にアクセス
ココでのゴールは、プログラムを使って、先ほどのブラウザの例と同じ情報を取ってくることです。 今回は、坂本龍一さんの曲名一覧を取ってきます。
今回の完成品
今回の完成品はコレです。Xcode上で、取得した曲データを表示するところまでやってみます。
コードは、こちらになります。
SongsViewer/ViewController.swift at master · cm-ttamiya/SongsViewer · GitHub
https://itunes.apple.com/search?term=Ryuichi+Sakamoto&entity=musicTrack&limit=3&lang=ja_jp&country=JP
- ブラウザでの例のように、特定のURLに対してリクエストを送信します。
- 続いて、返却されたデータを取得・表示します。
リクエストを送信
let urlString = "https://itunes.apple.com/search?term=Ryuichi+Sakamoto&entity=musicTrack&limit=3&lang=ja_jp&country=JP"
URLに "urlString"という名前をつけます。次にURL情報を使うときは "urlString"の名前を使えばOKです。
let url = NSURL(string: urlString)
今回扱う Web APIから情報を取ってくる機能では、NSURL型（URL情報を扱うもの）への変換が必要です。
let session = NSURLSession(configuration: NSURLSessionConfiguration.defaultSessionConfiguration())
NSURLSession は、Web APIから情報をとってくる機能を持っているクラスです。
リクエスト送信・データを取得
let dataTask = session.dataTaskWithURL(url!, completionHandler: { (data:NSData!, response:NSURLResponse!, error:NSError!) -> Void in
url を使ってサーバにアクセスし、返ってきた情報に名前を付けてメモリ上に保存します。
図にするとこのような形になります。
流れとしては、以下のようになります。
- 返ってきたデータを JSON として解釈・変換
- 必要なデータを抽出
- 抽出したデータを Xcodeのコンソールに出力
データを JSON として解釈・データ形式を変換
let json = NSJSONSerialization.JSONObjectWithData(data, options: NSJSONReadingOptions.AllowFragments, error:nil) as! [String:AnyObject]
NSData型のデータをJSONとして解釈し、プログラムで扱える個別のデータ（オブジェクト）の集まりに変換しています。
必要なデータを抽出
let results = json["results"] as! [[String:AnyObject]]
JSONから必要なデータを抽出します。今回は、まず results キーの値を取得します。値の中身は、複数の曲のデータです。
[[String:AnyObject]] 型に変換しています。
[String:AnyObject] 型のデータ（中身は "artistName":"RYUICHI SAKAMOTO" などの曲データ）が曲数文入った配列を表しています。
for song in results {
let trackName = song["trackName"] as! String
println(trackName)
}
次に、１曲ごとにデータを取り出し、その中の "trackName" キーに対応する値のみを取り出して表示します。
処理を実行
dataTask.resume()
ここまで書いてきた処理を、実際に実行します。
実行結果
このように、iTunes Store 上にある坂本龍一さんの曲一覧が Xcode 上に表示されました！
まとめ
今回学んだ内容は以下です。
- Web API の概念
- ブラウザで Web API を使い情報のリクエスト・取得
- Xcode で 情報のリクエスト・取得
次回
次回は、今回の情報取得の仕組みを使って、iPhone の画面上に一覧形式で表示してみます。
知見
これまで勉強会の資料は作ってきた経験はありますが、こうした授業の資料を作るのは、ほとんど経験がありませんでした。
勉強会での資料の作り方として、無意識に以下のような構成を使って作っていました。
- （サプライズのため）結論・結果を後に持ってくる
- 資料の中に入れる文字は必要最低限にし、言葉で補足
しかし、これらの構成を使うと、基本から学んでいく授業の資料としては、分かりにくいものとなってしまいます。
- これから学ぶ内容・結果を最初に書く
- これにより、今これからどんな内容を習得しようとしているのかを知ることが出来、動機付けになる
- 学ぶ内容をしっかり書き入れる
- ここは、若干異論があるかもしれませんが、あとから復習するときには、資料オンリーで授業内容を振り返ることで出来るというのも重要だと思います。
- また、画像や図は、とても効果的です。
![[小ネタ] ラスベガスに到着してからiPhoneのカメラのシャッター音が消えた件 #AWSreInvent](https://devio2023-media.developers.io/wp-content/uploads/2023/11/eyecatch_reinvent-2023-from-lasvegas-dayori.png)
